<template>
    <div class="box">
        <van-nav-bar v-if="!isDefaultHeader" :title="title" style="background: #4eb3e9;" :left-arrow="backBtnType === 'arrow'" @click-left="onClickLeft"></van-nav-bar>
        <div v-else><slot name="defaultHeader"></slot></div>
        <div class="van-button-list">
            <a class="btn" v-if="showSaveBtn" @click="onClickRight('handleSave')">保存</a>
            <van-icon name="back-top" class="mlg-8" v-if="showExportBtn" @click="onClickRight('handleExport')" />
            <van-icon name="filter-o" class="mlg-8" v-if="showFilterBtn" @click="onClickRight('handleFilter')" />
            <van-icon name="plus" class="mlg-8" v-if="showAddBtn" @click="onClickRight('handleAdd')" />
        </div>
        <div class="content">
            <slot></slot>
        </div>
        <moveBtn @on-click="onClickLeft" v-if="backBtnType === 'circular'" />
    </div>
</template>

<script>
    export default {
        props: {
            isDefaultHeader: { // 自定义标题栏
                type: Boolean,
                default: false
            },
            title: { // 标题
                type: String,
                default: ''
            },
            showAddBtn: { // 新增按钮
                type: Boolean,
                default: true
            },
            showExportBtn: { // 导出按钮
                type: Boolean,
                default: false
            },
            showFilterBtn: { // 过滤按钮
                type: Boolean,
                default: false
            },
            showSaveBtn: { // 保存按钮
                type: Boolean,
                default: false
            },
            backBtnType: { // 返回按钮样式
                type: String,
                default: 'circular'
            }
        },
        methods: {
            // 返回
            onClickLeft () {
                this.$router.go(-1);
            },
            // 点击右侧按钮
            onClickRight (name) {
                this.$emit(name);
            }
        }
    }
</script>

<style scoped lang='less'>
    .box {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .van-button-list {
            position: absolute;
            right: 16px;
            top: 14px;
            z-index: 9;
            .van-icon {
                font-size: 18px;
                color: #fff;
            }
            .mlg-8 {
                margin-left: 8px;
            }
            .btn {
                margin-right: 8px;
                color: #fff;
            }
        }
        .content {
            flex: 1;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 0px !important;
                height: 0px !important;
            }
        }
        /deep/ .van-nav-bar__title,
        /deep/ .van-nav-bar .van-icon {
            color: white;
            font-size: 16px;
        }
    }
</style>
